<template>
  <div class="container">
    <ul
      class="buttons row mb-1"
      v-show="false"
    >
      <li class="col-1">
        <el-card class>
          <p class="mt0 mb1 size2 font-weight5 blue">欢迎回来，</p>
          <span>
            {{ new Date().format("yyyy年MM月dd日星期几") }}，欢迎您
            <!-- {{ user.branchname ? user.branchname + "的" : "" }}
            {{ user.roleRight.role_name }}-->
          </span>
        </el-card>
      </li>
      <template v-for="item in buttons">
        <li
          :key="item.title"
          class="col-1"
        >
          <xy-card class="h100">
            <div class="card-body h100 row aic font-size-1-5">
              <span class="col-1 row jcc aic">
                <i :class="`iconfont ${item.icon} font-size-2-5`"></i>
              </span>

              <span class="col-2">
                <el-button
                  @click="$router.push({ path: '/task-info' })"
                  type="text"
                >
                  <span class="font-size-1-5">{{ item.title }}</span>
                </el-button>
              </span>
            </div>
          </xy-card>
        </li>
      </template>
    </ul>
    <div class="account">
      <ul class="row">
        <li class="col-1">
          <xy-card>
            <div
              class="clearfix"
              slot="header"
            >
              <span>
                <span class="dot b-primary"></span> 账户余额
              </span>
              <el-button
                @click="$router.replace('recharge')"
                icon="el-icon-info"
                style="float: right; padding: 3px 0"
                type="text"
              >查看</el-button>
              <!-- <router-link to="/recharge" style="float: right; padding: 3px 0"
                ><i class="el-icon-info"></i> 查看明细
              </router-link>-->
            </div>
            <div class="columns aic mt-2 mb-2">
              <div class="money">
                <div class="success">￥{{ toFixed2(TotalAccountBalance) }}</div>
                <div class="info">当前余额</div>
              </div>
              <!--               <div class="mt-1 row aic">
                <div>支付宝余额：{{availableAmount}}</div>
                <div class="ml-1">
                  <el-button
                    @click="onRecharge"
                    type="text"
                  >充值</el-button>
                </div>
              </div>-->
              <div class="jcsa mt-1 aic">
                <div class="center now-pay">
                  <!-- <el-button type="primary" round @click="onPay" size="medium">
                  充 值
                  </el-button>-->
                  <el-button
                    @click="$router.push('/refund')"
                    round
                    size="medium"
                    type="danger"
                  >余 额 提 现</el-button>
                </div>
              </div>
            </div>
          </xy-card>
        </li>
        <li class="col-2">
          <xy-card class="merchant-card h100">
            <div
              class="clearfix"
              slot="header"
            >
              <span>
                <span class="dot b-primary"></span> 充值数据
              </span>
            </div>
            <div
              id="recharge-info"
              style="height: 100%"
            ></div>
          </xy-card>
        </li>
        <li
          class="col-1"
          v-show="false"
        >
          <xy-news></xy-news>
        </li>
      </ul>
      <xy-card
        class="mt-1"
        v-show="false"
      >
        <div
          class="mt-2"
          id="task"
          style="height:500px"
        ></div>
      </xy-card>
    </div>
    <div></div>
    <el-dialog
      :visible.sync="merchantDlgVisible"
      title="企业信息"
    >
      <display-table :model="merchantInfo"></display-table>
    </el-dialog>
  </div>
</template>
<script>
import News from "../news/News";
export default {
  inject: ["toFixed2"],
  components: {
    "xy-news": News,
  },
  data() {
    return {
      TotalAccountBalance: 0,
      merchantInfo: "",
      merchantDlgVisible: false,
      AlipaySign: "",
      availableAmount: "",
      buttons: [
        {
          icon: "icon-renwu",
          title: "发布任务",
        },
        {
          icon: "icon-yue",
          title: "结算任务",
        },
        {
          icon: "icon-fapiao",
          title: "生成发票",
        },
      ],
    };
  },
  created() {
    this.getTotalAccountBalance();
    // this.getMerchantInfo();
  },
  async  mounted(){
    this.initRecharInfo();
    this.initTaskTable();
    // await this.getAgreementNo();
    // this.getAccountBook();
  },
  methods: {
    initRecharInfo(){
      let chartDom = document.getElementById("recharge-info");
      console.log(chartDom);
      let myChart = this.$echarts.init(chartDom);
      let option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
          //  type: "cross",
            label: {
              backgroundColor: "#283b56"
            }
          }
        },
        toolbox: {
          show: true,
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          name: "月份",
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
          // axisLine: {
          //   lineStyle: {
          //     color: "#ffffff",
          //   },
          // },
          // 网格样式
          // splitLine: {
          //   show: true,
          //   lineStyle: {
          //     color: ["red"],
          //     width: 1,
          //     type: "solid",
          //   },
          // },
        },
        yAxis: {
          type: "value",
          name: "充值金额（万元）",
          // axisLine: {
          //   lineStyle: {
          //     color: "#ffffff",
          //   },
          // },
          // 网格样式
          // splitLine: {
          //   show: true,
          //   lineStyle: {
          //     color: ["#262732"],
          //     width: 1,
          //     type: "solid",
          //   },
          // },
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          barWidth: 10,
          itemStyle: {
            barBorderRadius: [5, 5, 0, 0], // （顺时针左上，右上，右下，左下）
          },
        }]
      };
      option && myChart.setOption(option);
    },
    initTaskTable(){
      let chartDom = document.getElementById("task");
      let myChart = this.$echarts.init(chartDom);
      let option;
      setTimeout(function () {
        option = {
          legend: {},
          tooltip: {
            trigger: "axis",
            showContent: false
          },
          dataset: {
            source: [
              ["product", "2015", "2016", "2017", "2018", "2019", "2020"],
              ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
              ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
              ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
              ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1]
            ]
          },
          xAxis: { type: "category" },
          yAxis: { gridIndex: 0 },
          grid: { top: "55%" },
          series: [
            { type: "line", smooth: true, seriesLayoutBy: "row", emphasis: { focus: "series" } },
            { type: "line", smooth: true, seriesLayoutBy: "row", emphasis: { focus: "series" } },
            { type: "line", smooth: true, seriesLayoutBy: "row", emphasis: { focus: "series" } },
            { type: "line", smooth: true, seriesLayoutBy: "row", emphasis: { focus: "series" } },
            {
              type: "pie",
              id: "pie",
              radius: "30%",
              center: ["50%", "25%"],
              emphasis: { focus: "data" },
              label: {
                formatter: "{b}: {@2015} ({d}%)"
              },
              encode: {
                itemName: "product",
                value: "2015",
                tooltip: "2015"
              }
            }
          ]
        };
        myChart.on("updateAxisPointer", function (event) {
          let xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            let dimension = xAxisInfo.value + 1;
            myChart.setOption({
              series: {
                id: "pie",
                label: {
                  formatter: "{b}: {@[" + dimension + "]} ({d}%)"
                },
                encode: {
                  value: dimension,
                  tooltip: dimension
                }
              }
            });
          }
        });
        myChart.setOption(option);
      });
      option && myChart.setOption(option);
    },
    async getTotalAccountBalance() {
      let response = await this.$http.get(
        "/api/accountInfo/GetTotalAccountBalance"
      );
      this.TotalAccountBalance = response.data.Data.TotalAccountBalance;
      this.$store.commit("TotalAccountBalance", this.TotalAccountBalance);
    },
    async getAgreementNo(){
      let { branchid } = this.$store.getters.user;
      const response = await fetch(`http://m.xinyueai.com/api/AlipaySign/${branchid}`).then(res=>res.json());
      this.AlipaySign = response;

    },

    async  getAccountBook(){
      let { branchid } = this.$store.getters.user;
      // let data = {
      //   merchantUserId: branchid.toString(),
      //   extInfo: {
      //     agreementNo: this.AlipaySign.agreementNo
      //   }
      // };
      // const book = await this.$alipay.post("/api/AccountBook", data);
      // console.log(book);
      const bookInfo = await this.$alipay.get(`/api/AccountBook/${branchid}?agreementNo:${this.AlipaySign.agreementNo}`);
      console.log(bookInfo);
      this.availableAmount = bookInfo.data.availableAmount;
    },
    async getMerchantInfo() {
      // let { branchid } = this.$store.getters.user;
      // const response = await this.$http.get(
      //   `/api/Merchant/GetModel/${branchid}`
      // );
      // this.merchantInfo = response.data.Data;
      // console.log(this.merchantInfo);
      this.getAccountBook();
    },
    onPay() {
      this.$router.push("pay-detail");
    },
    onRecharge(){},
    bulkUndertakes(row) {
      console.log(row);
      this.$router.push("/apply");
    },
    showMerchantInfoDlg() {
      this.merchantDlgVisible = true;
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  .buttons {
    li {
      .el-card {
        height: 100%;
        .card-body {
          height: 100%;
        }
      }
    }
  }
  .account {
    .el-card {
      height: 100%;
    }
    .money {
      font-size: 1.5rem;
      width: 160px;
      height: 160px;
      // border: 1rem solid red;
      // //border-width: 1rem;
      // // border-style: solid;
      border: 1rem transparent solid;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      background-image: linear-gradient(to right, white, white),
        conic-gradient(blue, #6871f5, #86a5fb, #6871f5, blue, gray, gray);
      // border-top-color: gray;
      // border-right-color: blue;
      // border-bottom-color: green;
      // border-left-color: red;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      // background: conic-gradient(
      //   #9ed110,
      //   #50b517,
      //   #179067,
      //   #476eaf,
      //   #9f49ac,
      //   #cc42a2,
      //   #ff3ba7,
      //   #ff5800,
      //   #ff8100,
      //   #feac00,
      //   #ffcc00,
      //   #ede604
      // );
      //mask: radial-gradient(transparent 90px, #000 90px);
    }
    .right1 {
      margin-bottom: 1rem;
      ul {
        li {
          .el-button {
            font-size: 1rem !important;
            width: 100%;
            text-align: left;
            &:hover {
              background-color: #ecf5ff;
              cursor: pointer;
            }
          }
        }
      }
    }
    .merchant-info {
      li {
        display: flex;
        justify-content: space-between;
        + li {
          margin-top: 1rem;
        }
      }
    }
  }
  .now-pay {
    width: 100%;
    padding: 0 1rem;
    .el-button {
      width: 100%;
    }
  }
  .merchant-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .header {
      height: 30px;
    }
    .recharge-info {
      flex: 1;
    }
  }
}
</style>
